<template>
  <a-card :bordered="false">
    <a-row>
      <!-- 左侧文件树 -->
      <a-col :span="4" class="clName">
        <a-tree :treeData="treeData" :defaultExpandAll="true" @select="onSelect" style="height: 500px; overflow-y: auto" />
      </a-col>
      <!--右侧缩略图-->
      <a-col :span="18">
        <div v-for="(file, key) in dataSource" :key="key">
          <a-col :span="24">
            <a-divider orientation="left">{{ file.fileName }}</a-divider>
          </a-col>
          <!-- 预览区域 -->
          <a-col :span="24">
            <template v-if="file.filePdfPath">
              <div @click="pdfPreview(file.title)">
                <img style="width: 80px; height: 80px" src="/@/assets/images/pdf4.jpg" />
              </div>
            </template>
            <template v-else> (暂无材料，点击"选择文件"或"扫描上传"上传文件) </template>
          </a-col>
        </div>
      </a-col>
    </a-row>
    <div style="display: none">
      <iframe id="pdfPreviewIframe" :src="url" frameborder="0" width="100%" height="550px" scrolling="auto"></iframe>
    </div>
  </a-card>
</template>

<script lang="ts">
  import { defineComponent, ref, unref, onMounted } from "vue"
  import { useGlobSetting } from "/@/hooks/setting"
  import { getAccessToken } from "/@/utils/cache/module/iam"

  const mockdata = [
    {
      id: "1",
      key: "1",
      title: "实例.pdf",
      fileCode: "shili",
      fileName: "实例",
      filePdfPath: "实例",
    },
  ]

  export default defineComponent({
    name: "JeecgPdfView",
    setup() {
      const glob = useGlobSetting()
      const treeData = ref([
        {
          title: "所有PDF电子档",
          key: "0-0",
          children: mockdata,
        },
      ])
      const dataSource = ref(mockdata)
      const allData = ref(mockdata)
      const url = ref(`${glob.domainUrl}/sys/common/pdf/pdfPreviewIframe`)

      /**
       * 打开iframe窗口
       * @param title
       */
      function pdfPreview(title) {
        let iframe = document.getElementById("pdfPreviewIframe")
        let json = { title: title, token: getAccessToken() }
        iframe.contentWindow.postMessage(json, "*")
      }

      // 选择PDF文件
      function onSelect(selectedKeys, info) {
        dataSource.value = []
        if (selectedKeys[0] === undefined || selectedKeys[0] === "0-0") {
          dataSource.value = unref(allData)
        } else {
          dataSource.value.push(info.node.dataRef)
        }
      }

      return {
        url,
        dataSource,
        treeData,
        allData,
        onSelect,
        pdfPreview,
      }
    },
  })
</script>
